import { renderer, RendererStatus } from '@/core/renderer';
import './style.scss'
import { Micon } from '@/assets/iconfont';
import { useAppDispatch, useAppSelector } from '@/store';
import { toolClassMap } from '@/reducers/toolSlice';
import { Space } from 'antd';
import { useEffect } from 'react';
import canvasSlice from '@/reducers/canvasSlice';
import { debounce } from 'lodash';
import { MessageComponent } from '@/context/message/main';


export default () => {
  const toolsState = useAppSelector((state) => state.tools)
  const ToolClass = toolsState.active ? toolClassMap[toolsState.active.name] : null;
  const canvasState = useAppSelector(state => state.canvas)
  const dispatch = useAppDispatch()

  useEffect(() => {
    const onstatusChange = debounce((status: RendererStatus) => {
      dispatch(canvasSlice.actions.setRendererStatus(status))
    }, 100)
    renderer.on('statusChange', onstatusChange)
  }, [])

  

  return <>
  <div className="params-wrapper">
    {
      !toolsState.active && <>
        <div className="params-content">
          <Space>
            <Micon type="micon-home" style={{ color: 'rgba(255, 255, 255, 0.22)', fontSize: 24 }}></Micon>
            <div className=''></div>
            <div className='params-block'></div>
            <div className='params-block' style={{ width: 100 }}></div>
            <div className='params-block'></div>
            <div className='params-block' style={{ width: 80 }}></div>
            <div className='params-block'></div>
          </Space>
        </div>
      </>
    }

    <div className="params-content tools">
      {
        (toolsState.active && ToolClass?.Params) && <>
          <ToolClass.Params {...toolsState.active} key={toolsState.active.name}></ToolClass.Params>
        </>
      }
    </div>
    
    <div className="params-content status">
      <MessageComponent></MessageComponent>
      <div className={`params-pilotlamp ${canvasState.rendererStaus}`}></div>
    </div>
  </div>
  </>
}